<template>
    <div class="container">
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="personBox" v-if="type==2||type==4">
        <div class="title">{{type==2?"转交给":"选择抄送人"}}<span class="red">*</span></div>
        <div class="ul">
          <div class="li" @click="getToContacts">
            <img class="addIcon" src="../assets/ICON/add.png" alt="">
            <div class="name blue">添加</div>
          </div>
          <div class="li" v-for="(item2,index2) in choosePerson.values" :key="index2">
            <img :src="item2.photo?item2.photo:header" alt="">
            <div class="name">{{item2.username}}</div>
          </div>
        </div>
      </div>
      <div class="ipt">
        <div class="title" v-if="type==10">评论<span class="red">*</span></div>
        <div class="title"  v-if="type==8||type==9">{{title}}理由(非必填)</div>
        <div class="title"  v-if="type<8">{{title}}原因(选填)</div>
        <van-field
          v-model="message"
          rows="4"
          autosize
          type="textarea"
          maxlength="100"
          :placeholder="'请输入'+title+'内容'"
          show-word-limit
        />
      </div>
      <div class="btnBox">
        <van-button class="btn" type="default" block @click="submit">{{title}}</van-button>
      </div>
      
    </div>
</template>
<script>
import $ from 'jquery'
import { Dialog } from 'vant';
export default {
  data() {
    return {
      type:1,
      title:"",
      message:"",
      header:require('../assets/header.png'),
      baseUrl:'http://test.api.officelinking.com/index.php/',
      form_id:"",
      cid:"",
      token:"",
      // personList:[
      //   {
      //     id: 9132,
      //     photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/bc9f6073096236ac5bc95078ae4fb379.jpg",
      //     username: "覃相朝"
      //   },
      //   {
      //     id: 9389,
      //     photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/d806ab33810b752c61ee306cbdc378dc.jpg",
      //     username: "王三"
      //   },
      //   {
      //     id: 17478,
      //     photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/c8a62deb3c7af7970e52eb719a1fa81a.jpg",
      //     username: "负责人"
      //   },
      //   {
      //     id: 17478,
      //     photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/c8a62deb3c7af7970e52eb719a1fa81a.jpg",
      //     username: "负责人"
      //   },
      // ],
      choosePerson:{
        names:"",
        values:[]
      },
      isAndroid:true,
    };
  },
  created () {
    // console.log('data11',this.$route.query)
    let data=this.$route.query||""
    console.log('data',data)
    if(data){
      //type 8同意9拒绝10评论
      let type=data.type||1;
      this.type=type;
      if(type==1){
        this.title="催办"
      }else if(type==2){
        this.title="转交"
      }else if(type==4){
        this.title="抄送"
      }else if(type==6){
        this.title="撤销"
      }else if(type==7){
        this.title="再次提交"
      }else if(type==8){
        this.title="同意"
      }else if(type==9){
        this.title="拒绝"
      }else if(type==10){
        this.title="评论"
      }else{
        this.title="催办1"
      }
      this.form_id=data.form_id
      this.cid=data.cid
      this.token=data.token
    }
    window["addUsers"] = res => {
      this.addUsers(res);
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    submit(){
      if(this.type==10){
        if(!this.message){
          this.$toast("评论内容不能为空！")
          return
        }
        let data={id:this.form_id,cid:this.cid,content:this.message}
        let url1=this.baseUrl+"/app/approval/comment"
        this.comment(data,url1)
      }else if(this.type==9||this.type==8){
        let review_status=this.type==8?1:0
        let data={id:this.form_id,cid:this.cid,review_msg:this.message,review_status}
        let url1=this.baseUrl+"/app/approval/process"
        this.comment(data,url1)
      }else if(this.type==7){
        // let review_status=this.type==8?1:0
        // let data={id:this.form_id,cid:this.cid,review_msg:this.message,review_status}
        // let url1=this.baseUrl+"/app/approval/process"
        // this.comment(data,url1)
      }else if(this.type==6){
        Dialog.confirm({
          title: '提示',
          message: '确定要撤销申请吗？',
        })
        .then(() => {
          // on confirm
          let data={id:this.form_id,cid:this.cid,cancel_msg:this.message}
          let url1=this.baseUrl+"/app/approval/cancel"
          console.log(data,url1)
          return
          this.comment(data,url1)
        })
        .catch(() => {
          // this.$toast('撤销弹窗失败');
        });
      }else if(this.type==4){
        let send_mids=[]
        this.choosePerson.values.forEach(v=>{
          send_mids.push(v.id)
        })
        let data={id:this.form_id,cid:this.cid,send_msg:this.message,send_mids}
        let url1=this.baseUrl+"/app/approval/copy"
        this.comment(data,url1)
      }else if(this.type==2){
        let deliver_mid=this.choosePerson.values[0].id||0
        let data={id:this.form_id,cid:this.cid,deliver_mid,deliver_msg:this.message}
        let url1=this.baseUrl+"/app/approval/deliver"
        this.comment(data,url1)
      }else if(this.type==1){
        let data={id:this.form_id,cid:this.cid}
        let url1=this.baseUrl+"/app/approval/cancel"
        this.comment(data,url1)
      }
    },
    success(){
      this.$toast(`${this.title}成功`);
      this.onClickLeft()
    },
    comment(data,url){
      let that=this
      $.ajax({
        url:url,
        type:'post',
        dataType:'json',
        data,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('response.data1',response,response.data)
          if(response.code===0){
            that.success()
          }
        },
        error:function (err) {
          console.log(err)
          that.$toast('接口失败');
        }
      })
    },
    deliverInfo(){
      let that=this
      let did=''
      $.ajax({
        url:`${that.baseUrl}/app/approval/deliverInfo`,
        type:'post',
        dataType:'json',
        data:{id:this.form_id,cid:this.cid,did},
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('response.data1',response,response.data)
          if(response.code===0){
            
          }
        },
        error:function (err) {
          console.log(err)
          that.$toast('接口失败');
        }
      })
    },
    getToContacts(){
      if(process.env.NODE_ENV === 'production'){
        console.log('123')
        let data=JSON.stringify([])
        if(this.isAndroid){
          console.log('调用iosgoToUsers方法')
          window.android.goToUsers(data);
        }else if(this.isIOS){
          console.log('调用iosgoToUsers方法')
          window.webkit.messageHandlers.goToUsers.postMessage(data); 
        }else{
          this.addUsers(
          [
            {id: 59172,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "tt"}
          ]
        );
        }
      }else{
        console.log('124')
        //自己测试拿人员数据
        this.addUsers(
          [
            {id: 59179,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "tt23"},
            {id: 59175,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "tt234"},
            {id: 59160,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "t3"},
            {id: 59161,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "t4"},
            {id: 59162,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "t5"},
            {id: 59163,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "t6"},
          ]
        );
      }
      
    },
    addUsers(arg){
      console.log('arg3',arg,this.choosePerson)
      //联系人
        let names,values
        if(this.choosePerson.names){
          names=this.choosePerson.names.split(',')
          values=this.choosePerson.values
        }else{
          names=[]
          values=[]
        }
        arg.forEach((v,i)=>{
          console.log('isContactOne',this.isContactOne,v,names)
          if(names.indexOf(v.username)==-1){
            names.push(v.username)
            values.push(v)
          }else{
            let idx=names.indexOf(v.username)
            names.splice(idx,1)
            names.push(v.username)
            values.splice(idx,1)
            values.push(v)
          }
          
        })
        console.log('names',names)
        this.choosePerson.names=names.join(',')
        this.choosePerson.values=values
        console.log('this.choosePerson',this.choosePerson)
        this.$forceUpdate();
    },
  },
};

</script>
<style lang="scss" scoped>
.container{
  background-color: #f5f5f5;
  padding-bottom: 60px;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  .personBox{
    background-color: #fff;
    margin-top: 8px;
    .title{
      height:40px;
      line-height: 40px;
      font-size: 16px;
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      text-align: left;
      .red{
        color: red;
      }
    }
    .ul{
      height: auto;
      overflow: hidden;
      box-sizing: border-box;
      padding: 0 15px 10px;

      .li{
        height: 30px;
        line-height: 30px;
        border-radius: 30px;
        padding: 0 10px;
        margin-bottom: 4px;
        background-color: #EBECED;
        float: left;
        position: relative;
        margin-right: 6px;
        img{
          width: 24px;
          height: 24px;
          display: inline-block;
          border-radius: 50%;
          margin-right: 6px;
          margin-top: -2px;
          vertical-align: middle;
          &.addIcon{
            width: 14px;
            height: 14px;
            margin-top: -3px;
          }
        }
        .name{
          display: inline;
          line-height: 30px;
          &.blue{
            color:#2a5aff;
          }
        }
        
        .closed{
          position: absolute;
          right: -4px;
          top: -6px;
        } 
        .arrow{
          position: absolute;
          transform: rotate(-90deg);
          // margin-top: 4px;
          right: -20px;
          top: 4px;
        }
        &.mr24{
          margin-right: 24px;
        }
        &.mr24.lastarrow{
          margin-right: 6px;
          .arrow{
            display: none;
          }
        }
      }
      .add{
        float: left;
        &.arrow{
          transform: rotate(-90deg);
          margin-top: 4px;
        }
      }
    }
  }
  .ipt{
    margin-top: 8px;
    width: 100%;
    height: auto;
    padding-top: 15px;
    background-color: #fff;
    .title{
      height: 16px;
      line-height: 16px;
      font-size: 16px;
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      text-align: left;
      .red{
        color: red;
      }
    }
  }
  .btnBox{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f8f8fa;
    padding: 9px 15px;
    box-sizing: border-box;
    .btn{
      box-sizing: border-box;
      background-color: #2A5AFF;
      color:#fff;
      border-radius: 6px;
    }
  }
  
}
</style>